var data = [
  {
    "name": "蔡秦发",
    "sex": "boy",
    "items": [
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "文体艺术与身心发展",
        "time": "2015/10/24",
        "color": "black",
        "pass": true
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "文体艺术与身心发展",
        "time": "2017/01/24",
        "color": "blue",
        "pass": false
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "思想政治与道德素养",
        "time": "2016/07/24",
        "color": "red",
        "pass": true
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "科学技术与创新创业",
        "time": "2017/10/09",
        "color": "blue",
        "pass": false
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "思想政治与道德素养",
        "time": "2015/10/24",
        "color": "red",
        "pass": true
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "社会实践与志愿服务",
        "time": "2016/10/24",
        "color": "blue",
        "pass": false
      },
      {
        "title": "世纪木棉220中国足球教育发展的理论思考与实践探索",
        "sort4": "思想政治与道德素养",
        "time": "2015/10/24",
        "color": "red",
        "pass": true
      }
    ]
  },
  {
    "name": "陈崇彦",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "陈东华",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "陈静虹",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "陈裕鸿",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "陈正",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "邓立坚",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "杜栋坤",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "胡雄展",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "黄韬",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "黄玉婷",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "霍俊豪",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "梁家炎",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "廖皓琳",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "廖泽杭",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "林沛斐",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "林烁挺",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "罗家炜",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "佘嘉壕",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "唐少逸",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "汪洋",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "王若梵",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "王天皓",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "吴敏意",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "吴廷霖",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "许桂仪",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "叶茂辉",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "叶艺铿",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "余泽琼",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "曾德才",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "张莉莎",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "张瑞君",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "郑康达",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "植竞",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "周俊杰",
    "sex": "boy",
    "items": [
    ]
  },
  {
    "name": "周紫茵",
    "sex": "girl",
    "items": [
    ]
  },
  {
    "name": "朱智诚",
    "sex": "boy",
    "items": [
    ]
  }
];

function compare(obj1, obj2){
  var str1 = obj1.time[0]+obj1.time[1]+obj1.time[2]+obj1.time[3]+obj1.time[5]+obj1.time[6]+obj1.time[8]+obj1.time[9];
  var str2 = obj2.time[0]+obj2.time[1]+obj2.time[2]+obj2.time[3]+obj2.time[5]+obj2.time[6]+obj2.time[8]+obj2.time[9];
  var num1 = Number(str1);
  var num2 = Number(str2);
  return num2-num1;
}

new Vue({
	el: '#webPage',//绑定
	data: {
    student: {
      "name": "某某某",
      "sex": "",
      "items": [
      ]
    },
    name: "",//存储输入的值
    img: "img/nobody.jpg",//渲染图片
    num1: 0,//渲染数值
    num2: 0,//渲染数值
    num3: 0,//渲染数值
    num4: 0,//渲染数值
    sort3Flag: 1,//渲染类
    items: []//渲染项目
  },
  filters: {
    //item.pass的过滤
    passForm: function(value){
      if(value){
        return "已通过";
      }
      else{
        return "待审核";
      }
    }
  },
  methods: {
    //输入学生姓名
    ok: function(){
	  for(var i = 0; i < data.length; i++){
	    if(this.name == data[i].name){
	      //重置student
	      this.student = data[i];
	      //重置name
	      this.name = "";
	      //重置img
	      if(this.student.sex == "boy"){
	        this.img = "img/boy.jpg";
	      }
	      else{
	        this.img = "img/girl.jpg";
	      }
	      //重置num1、num2、num3、num4
	      this.num1 = 0;
	      this.num2 = 0;
	      this.num3 = 0;
	      this.num4 = 0;
	      for(var j = 0; j < this.student.items.length; j++){
	        if(this.student.items[j].sort4 == "文体艺术与身心发展"){
	          this.num1 += 1;
	        }
	        else if(this.student.items[j].sort4 == "思想政治与道德素养"){
	          this.num2 += 1;
	        }
	        else if(this.student.items[j].sort4 == "科学技术与创新创业"){
	          this.num3 += 1;
	        }
	        else if(this.student.items[j].sort4 == "社会实践与志愿服务"){
	          this.num4 += 1;
	        }
	      };
	      //重置sort3Flag
	      this.sort3Flag = 1;
	      //重置items
	      this.items = this.student.items;
	      this.items.sort(compare);
	    };
	  };
    },
    //选择时间排序、已通过或待审核
    sort3Click: function(value){
      if(value == 1){
      	//重置sort3Flag
        this.sort3Flag = 1;
        //重置items
        this.items = this.student.items;
      }
      else if(value == 2){
      	//重置sort3Flag
        this.sort3Flag = 2;
        //重置items
        this.items = [];
        for(var i = 0; i < this.student.items.length; i++){
          if(this.student.items[i].pass){
            this.items.push(this.student.items[i]);
          };
        };
      }
      else{
      	//重置sort3Flag
        this.sort3Flag = 3;
        //重置items
        this.items = [];
        for(var i = 0; i < this.student.items.length; i++){
          if(!this.student.items[i].pass){
            this.items.push(this.student.items[i]);
          };
        };
      }
    }
  }
});